<template>
  <div v-show="codeShow" id="divIdentifyingCode">
    <div class="login-box">
      <div class="loginBox">
        <div style="width: 80%;margin: 0 auto;padding-top:30px">
          <h2 style="font-size: 20px">请进行学习进度认证 <span style="font-size: 14px;color: red">(点击图片可进行更换验证码)</span> </h2>
          <el-input prefix-icon="el-icon-question" placeholder="请输入验证码" v-model="value" style="width: 100%;margin-bottom: 20px"></el-input>
          <div class="item s-canvas">
            <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="drawPic()"></canvas>
          </div>
          <br>
          <el-button type="primary" @click="onSubmit" style="width: 100%;">提交</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      identifyCode: {
        type: String,
        default: 'asdf'
      },
      codeShow: '',
    },
    data(){
        return {
          value: '',
          fontSizeMin: 100,
          fontSizeMax: 40,
          backgroundColorMin: 180,
          backgroundColorMax:240,
          colorMin: 50,
          colorMax: 160,
          lineColorMin:40,
          lineColorMax: 180,
          dotColorMin: 0,
          dotColorMax: 255,
          contentWidth: 384,
          contentHeight: 120
        }
    },
    methods: {
      // 生成一个随机数
      randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
      },
      // 生成一个随机的颜色
      randomColor(min, max) {
        let r = this.randomNum(min, max)
        let g = this.randomNum(min, max)
        let b = this.randomNum(min, max)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
      },
      drawPic() {
        let canvas = document.getElementById('s-canvas')
        let ctx = canvas.getContext('2d')
        // ctx.textBaseline = 'bottom'
        // 绘制背景
        ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) //图形填充颜色设置
        ctx.strokeStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax) //图形轮廓的颜色设置
        ctx.fillRect(0, 0, this.contentWidth, this.contentHeight) //绘制一个填充的矩形 0 0 width height x起点 y起点  宽 高
        ctx.strokeRect(0,0,this.contentWidth, this.contentHeight) // 绘制一个矩形边框 0 0 width height x起点 y起点  宽 高
        // ctx.clearRect(50,0,this.contentWidth,this.contentHeight)  //清除指定矩形区域，清除部分完全透明
        // 绘制文字
        for (let i = 0; i < this.identifyCode.length; i++) {
          this.drawText(ctx, this.identifyCode[i], i)
        }
        this.drawLine(ctx)
        this.drawDot(ctx)
      },
      drawText(ctx, txt, i) {
        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
        ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' //字体大小
        ctx.textBaseline = 'alphabetic' //基线对齐
        let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
        let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
        var deg = this.randomNum(-45, 45)
        // 修改坐标原点和旋转角度
        ctx.translate(x, y)//移动不同位置  参数偏移量
        ctx.rotate(deg * Math.PI / 180) //旋转 参数角度
        ctx.fillText(txt, 0, 0)
        // 恢复坐标原点和旋转角度
        ctx.rotate(-deg * Math.PI / 180)
        ctx.translate(-x, -y)
      },
      drawLine(ctx) {
        // 绘制干扰线
        for (let i = 0; i < 8; i++) {
          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
          ctx.beginPath() //新建一条路径
          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //设置起点x,y
          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight)) //绘制直线 x,y 一条当前位置到x,y点的直线
          ctx.stroke() // 通过线条绘制图形轮廓
          // ctx.closePath() //结束闭合路径
        }
      },
      drawDot(ctx) {
        // 绘制干扰点
        for (let i = 0; i < 100; i++) {
          ctx.fillStyle = this.randomColor(0, 255)
          ctx.beginPath()
          // 绘制圆弧或圆，x,y,radius，startAngle,endAngle,anticlockwise // x,y 圆心点，radius 半径，从startAngle开始到endAngle结束
          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
          ctx.fill() //通过填充路径的内容区域生成实心的图形。
        }
      },
      getIdentifyingCode: function (bRefresh) {
        let identifyCodeSrc =  "https://www.xxx.xxx.xxx/imgCode";
        if (bRefresh) {
          identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random();
        }
        let objs = document.getElementById("imgIdentifyingCode");
        objs.src = identifyCodeSrc;
      },
      onSubmit() {
          if(this.value == '') {
            this.$message({
              type: 'info',
              message: '请输入验证码',
              offset: '500'
            });
          }else if(this.value != 'asdf') {
            this.$message({
              type: 'info',
              message: '验证码错误',
              offset: '500'
            });
          }else {
            this.$emit('closeShow')
          }
      }
    },
    watch: {
      identifyCode() {
        this.drawPic()
      },
      codeShow(value) {
          if(value == true) {
            this.drawPic()
          }
      }
    },
    mounted() {

    }
  }
</script>

<style>
  #divIdentifyingCode {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 9999;
    top:0;
    left:0;
    background: rgba(0,0,0,0.3);
  }
  .s-canvas {
    width: 100%;
    height: 120px;
    cursor: pointer;
    margin-bottom: 20px;
  }
  /deep/
  .el-form-item__content {
    height: 50px;
  }
  .login-box {
    background: #fff;
    width: 500px;
    height: 400px;
    border-radius: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
  }
  .loginBox {
    box-sizing: border-box;
    font-size: 0;
    padding: 0 10px;
  }
  /deep/
  .el-input {
    margin-bottom: 30px;
  }
</style>
